<script setup>
// 控制地址切换弹窗打开标识
const showDialog=ref(false)

// 切换地址
const activeAddress=ref({})
const switchAddress=(item)=>{
    activeAddress.value=item
}

// 点地址后确认
const confirm =()=>{
    curAddress.value=activeAddress.value
    showDialog.value=false
    activeAddress.value={}
}

</script>
<template>
<!-- 切换地址 -->
<el-dialog v-model="showDialog" title="切换收货地址" width="30%" center>
<div class="addressWrapper">
<div class="text item" :class="{active:activeAddress.id===item.id}"  @click="switchAddress(item)" v-for="item in checkInfo.userAddresses"  :key="item.id">
    <ul>
    <li><span>收<i />货<i />人：</span>{{ item.receiver }} </li>
    <li><span>联系方式：</span>{{ item.contact }}</li>
    <li><span>收货地址：</span>{{ item.fullLocation + item.address }}</li>
    </ul>
</div>
</div>
<template #footer>
<span class="dialog-footer">
    <el-button  @click="showDialog=false">取消</el-button>
    <el-button type="primary" @click="confirm">确定</el-button>
</span>
</template>
</el-dialog>
</template>


<style lang="scss">
.addressWrapper {
  max-height: 500px;
  overflow-y: auto;
}

.text {
  flex: 1;
  min-height: 90px;
  display: flex;
  align-items: center;

  &.item {
    border: 1px solid #f5f5f5;
    margin-bottom: 10px;
    cursor: pointer;

    &.active,
    &:hover {
      border-color: $xtxColor;
      background: lighten($xtxColor, 50%);
    }

    >ul {
      padding: 10px;
      font-size: 14px;
      line-height: 30px;
    }
  }
}

</style>